<script type="text/javascript">
    $(function() {
        $("[name='rotating_type']").change(function() {
            if ($(this).val() == "alphabetically") {
                $("[name='fewest']").prop('checked', false).attr('onclick', 'return false').addClass("disabled");
				
            }
            else {
                $("[name='fewest']").attr('onclick', '').removeClass('disabled');
            }
        });
		
        $("[name='sort_type']").change(function() {
            var val = $(this).val();
			if (val != "redo") {
				$('#redo-data').hide();
			}	
            else {
				$('#redo-data').show();
            }
        });
    });

	
    $(document).ready(function() {
       $('#redo-data').hide();
    });
	
</script>
<div class="content">
    <h1>Manage Registration Sections</h1>
    <p>
        Large courses are often split into multiple <em>registrations sections</em> for laboratory or recitation class time.<br>
        Courses that are cross-listed in different departments may have multiple course codes/prefixes.
    </p>
    <p>
        Each student in the course is assigned to one registration section.<br>
        Students who have dropped the course will be assigned to the <em>NULL</em> registration section.
    </p>
    <p>
        From the "Graders" tab in the top menu, each grader may be assigned to grade zero, one, or multiple registration sections.<br>
        Assigning grading <em>by registration section</em> facilitates routine grading of the <em>same set of students</em> throughout the term.
    </p>
    <br />
    <form action="{{ update_registration_sections_url }}" method="POST">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
        <div class="row">
            <div class="box col-md-6">
                <h2>Current Registration Section Counts</h2>
                {# This is a data table #}
                <table class="table table-bordered table-striped">
                    <caption />
                    <thead>
                        <tr>
                            <th>Section</th>
                            <th>Count</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for section in reg_sections %}
                            {% if reg_sections_count[section['sections_registration_id']] %}
                            <tr>
                                <td>Section {{ section['sections_registration_id'] }}</td>
                                <td>{{ reg_sections_count[section['sections_registration_id']] }}</td>
                            </tr>
                            {% else %}
                            <tr>
                                <td>Section {{ section['sections_registration_id'] }}</td>
                                <td>0</td>
                            </tr>
                            {% endif %}
                        {% endfor %}
                        {% if reg_sections_count['NULL'] %}
                        <tr>
                            <td>Section NULL</td>
                            <td>{{ reg_sections_count['NULL'] }}</td>
                        </tr>
                        {% else %}
                        <tr>
                            <td>Section NULL</td>
                            <td>0</td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
            <div class="box col-md-6">
                <br /><br />
                <div class="option">
                    <div class="option-input"><input type="text" name="add_reg_section" id="add_reg_section" value="" placeholder="Eg: 3" /></div>
                    <div class="option-desc">
                    	<label for="add_reg_section">
							<div class="option-title">Add Registration Section</div>
							<div class="option-alt">
								Enter a registration section which is not already a registration section.
							</div>
						</label>
                    </div>
                </div>
                <div class="option">
                    <div class="option-input"><input type="text" name="delete_reg_section" id="delete_reg_section" value="" placeholder="Eg: 3" /></div>
                    <div class="option-desc">
                    	<label for="delete_reg_section">
							<div class="option-title">Delete a Registration Section</div>
							<div class="option-alt">
								Registration Section to be deleted should not have any student enrolled in it and no grader should be assigned to grade the section.
							</div>
						</label>
                    </div><br />
                    <input style="margin-top: 20px; margin-right: 20px; float:right" type="submit" class="btn btn-primary" value="Submit" />
                </div>
            </div>
        </div>
    </form>
</div>
<div class="content">
    <h1>Manage Rotating Sections</h1>
    <p>
        Rotating sections are an alternate way to divide the task of grading a large course enrollment among multiple graders.<br>
        If the registration sections are of significantly different size, rotating sections will allow a more equitable assignment of grading tasks.<br>
        Furthermore, shuffling or rotating the assignment of graders to rotating sections for each assignment will ensure that each student <br>
        receives feedback from multiple graders throughout the term and can mitigate the variations in ease or strictness between the graders.
    </p>
    <p>
        Each registered student is assigned to a rotating section for the duration of the course.<br>
        For each assignment with manual/TA grading assigned by rotating sections, each grader is assigned zero, one, or multiple rotating sections.<br>
        The rotating assignments for each gradeable are made via the "Create/Edit Gradeable" page for the specific gradeable.
    </p>

    <form action="{{ update_rotating_sections_url }}" method="POST">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
        <div class="row">
            <div class="box col-md-6" id="left_box">
                <h2>Current Rotating Section Counts</h2>
                <div class="row">
                    <div class="col-md-6">
                        {# This is a data table #}
                        <table class="table table-striped">
                            <caption>Registered Students<div class="subcaption">(non-NULL registration section)</div></caption>
                            <thead class="table-bordered">
                                <th>Rotating Section</th>
                                <th>Students</th>
                            </thead>
                            <tbody class="table-bordered">
                                {% for row in not_null_counts %}
                                <tr>
                                    <td>Section {{ row['rotating_section'] ?? "NULL" }}</td>
                                    <td>{{ row['count'] }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-6">
                        {# This is a data table #}
                        <table class="table table-striped">
                            <caption>Unregistered Students<div class="subcaption">(NULL registration section)</div></caption>
                             <thead class="table-bordered">
                                <th>Rotating Section</th>
                                <th>Students</th>
                            </thead>
                            <tbody class="table-bordered">
                                {% for row in null_counts %}
                                <tr class="table-bordered">
                                    <td>Section {{ row['rotating_section'] ?? "NULL" }}</td>
                                    <td>{{ row['count'] }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="box col-md-6" id="right_box">
   				<fieldset class="flex-col">
					<legend class="option-title">Change Current Sections</legend>
					<label>
						<input type="radio" name="sort_type" value="drop_null" />
                        Only remove unregistered students (registration section=NULL) from rotating sections
					</label>
					<label>
						<input type="radio" name="sort_type" value="fewest" />
                        Remove unregistered students (registration section=NULL) from rotating sections and put newly registered students into rotating section with fewest members
					</label>
                    <label>
                        <input type="radio" name="sort_type" value="drop_all" />
                        Remove all students from rotating sections
                    </label>
					<label>
						<input type="radio" name="sort_type" value="redo" />
                        Redo rotating sections completely
					</label>
				</fieldset>
                <div id="redo-data">
                    <label>
                        Number of sections:
                        <input type="number" name="sections" />
                    </label> 
                    <label>
                        Sort students:
                        <select name="rotating_type">
                            <option value="random">Randomly</option>
                            <option value="alphabetically">Alphabetically</option>
                        </select>
                    </label>
                    <fieldset class="flex-col">
                        <legend>Exclude students in the following registrations:</legend>
                        {% for row in reg_sections %}
                        <label>
                            <input type="checkbox" name="{{ row['sections_registration_id'] }}" value="{{ row['sections_registration_id'] }}" />
                            Section {{ row['sections_registration_id'] }}
                        </label>
                        {% endfor %}
                    </fieldset>
                </div>
                <input type="submit" class="btn btn-primary float-right" value="Submit" />
            </div>
        </div>
    </form>
</div>